<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_DOM事件监听</title>
</head>
<body>
<button onclick="alert('点击了！')">按钮1</button>
<button id="btn">按钮2</button>
<h4>震惊！</h4>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aperiam asperiores aut consequuntur cum
        eius error facere, id iusto maiores necessitatibus non omnis praesentium quia ratione repellendus soluta unde?
    </div>
    <div>Adipisci atque consectetur harum, magnam maxime minima nam porro quaerat quam, reprehenderit rerum tenetur unde
        vitae. Consectetur magni minus molestiae natus nesciunt non officia suscipit! Dolorem ducimus et repellat
        voluptatum?
    </div>
    <div>Accusamus accusantium architecto earum excepturi labore tempore veniam vero! Atque consequatur delectus earum
        error et ipsum magnam necessitatibus nihil numquam obcaecati officia officiis quidem reprehenderit sapiente,
        veniam! Beatae, eligendi, repellendus?
    </div>
    <div>Accusantium aperiam, consectetur cumque cupiditate, delectus dolore, ducimus error fugiat iusto minima minus
        possimus provident quasi quisquam repellat vitae voluptatem! Deserunt dignissimos doloremque minima nam natus
        nulla tempora voluptas voluptatibus.
    </div>
    <div>Amet delectus dignissimos enim fugiat laboriosam odio pariatur quod sed similique? Architecto autem beatae
        commodi debitis dicta dolorum eius error iure iusto, magni nam nesciunt nulla quae quam ratione, voluptatem!
    </div>
    <div>Aliquid at aut beatae debitis ea, eos expedita id illum inventore iure, nam quibusdam voluptatum? Corporis
        distinctio, dolorem doloremque earum explicabo, fugiat molestiae natus quos ratione rem, tempora voluptate
        voluptatum.
    </div>
    <div>Ab autem commodi dignissimos distinctio dolore eligendi eos eum ex impedit, itaque laboriosam neque odit quae
        quasi qui quidem repudiandae saepe sit totam unde? Consequuntur impedit ipsa nostrum quasi vero.
    </div>
    <div>A blanditiis culpa, cum distinctio dolorem labore, natus nulla numquam pariatur, perferendis quo sunt veniam
        vero! Amet architecto autem debitis, dicta earum esse magni nisi officiis quaerat soluta ullam vitae!
    </div>
    <div>Ab alias beatae commodi deleniti eligendi expedita incidunt ipsa iure porro quisquam, reiciendis sequi tempore
        unde voluptate, voluptates. Aspernatur autem dolorum facere ipsum minus obcaecati odit unde vel voluptate
        voluptatem?
    </div>
    <div>At consequuntur cupiditate deserunt eligendi ipsum omnis perferendis, quidem quis tenetur totam. Animi autem
        eos unde! Ad asperiores deserunt doloremque laudantium minus odio pariatur qui reiciendis saepe similique
        tempora, voluptas.
    </div>
    <div>Aspernatur autem est et quaerat quam! At consequatur cupiditate dignissimos enim error exercitationem illum
        inventore, laboriosam molestiae mollitia necessitatibus nulla numquam placeat possimus provident quia rerum,
        ullam ut vel voluptate!
    </div>
    <div>Aperiam aspernatur autem consectetur debitis doloribus, enim fugit illo incidunt iure libero nam natus numquam
        odit quam quod totam vero. Amet asperiores beatae eius esse mollitia necessitatibus odio quia, quisquam?
    </div>
    <div>Cumque eligendi iste labore? Animi consequatur itaque libero quia repellat sapiente voluptatibus. Ab aliquam
        dolorum et expedita explicabo, nam nihil nobis non placeat ratione, repellendus sapiente sit soluta voluptatem
        voluptatum!
    </div>
    <div>Aliquam architecto at autem blanditiis commodi distinctio dolorem doloremque eaque facilis fugiat id in labore
        natus neque officia pariatur perspiciatis porro quas quidem repellendus sapiente sequi, sint vel velit
        voluptatem.
    </div>
    <div>Amet at culpa deserunt doloremque dolorum est expedita, fuga incidunt, ipsam iure libero maiores minus nemo
        optio quaerat quidem repellat tempore temporibus ullam voluptates? Commodi cum harum labore provident suscipit.
    </div>
    <div>Animi autem beatae commodi consequuntur debitis dolorum enim eos expedita fugiat illum incidunt ipsa ipsam,
        ipsum magni maxime nam nobis non nulla perspiciatis qui quis rerum sunt tempore velit voluptates?
    </div>
    <div>Asperiores eaque illum repudiandae sunt. Accusantium ad asperiores beatae commodi delectus ex expedita facilis
        fugit hic, inventore iusto laboriosam neque nesciunt pariatur, placeat quae quisquam quos vel vero voluptas
        voluptate?
    </div>
    <div>Amet blanditiis debitis, deleniti distinctio doloremque ea ipsum! Aliquam commodi cumque dolor excepturi quasi!
        Ab consequatur deleniti doloribus ex excepturi labore maxime minus placeat repellat voluptas. Atque cum itaque
        unde.
    </div>
    <div>Animi aut harum illum magni mollitia non veniam, voluptas. A accusantium adipisci aliquam dignissimos dolorum,
        enim esse, et facere laudantium nesciunt nihil, nulla odit perspiciatis qui quisquam similique tempora vel.
    </div>
    <div>Architecto autem corporis earum eveniet, illum ipsum laborum laudantium minus quo saepe sequi totam velit
        voluptatum. Aspernatur cupiditate dolorem dolorum ducimus error, eum explicabo fugiat laudantium odit officiis
        placeat totam.
    </div>
    <div>A ab adipisci aliquam aperiam distinctio ducimus eaque earum eligendi, error fugit hic incidunt laborum
        laudantium magni maiores nemo neque nulla obcaecati possimus quae quam quo totam voluptas voluptatem voluptates?
    </div>
    <div>Amet animi, asperiores consequatur deleniti eaque ipsa iure laboriosam magnam mollitia necessitatibus non odio
        omnis quis quo recusandae repudiandae voluptas! Autem ducimus ex neque nulla quisquam tempora totam unde velit.
    </div>
    <div>Commodi consectetur debitis dolore earum expedita labore, odit pariatur perspiciatis quas repudiandae soluta
        sunt totam veritatis? Et incidunt ipsum iste laborum laudantium maiores molestias, neque officiis placeat quis
        sit ullam.
    </div>
    <div>Ab accusantium expedita nesciunt! Animi aperiam dolorum eos, fugiat laboriosam laborum mollitia, nisi nulla
        possimus quaerat ratione saepe sit, velit. Commodi, dolorum iusto nostrum officiis pariatur qui temporibus vitae
        voluptates?
    </div>
    <div>Commodi culpa delectus deleniti dicta dolorum earum exercitationem iste laudantium magnam molestiae neque odit,
        perferendis? Consectetur cum dolorem eaque eligendi eos eum laboriosam mollitia nemo pariatur quae quibusdam
        sed, voluptas?
    </div>
    <div>Accusantium ad animi commodi consequatur debitis dolorem doloremque ducimus enim est, eveniet in ipsa ipsam
        itaque libero minima minus nam nulla odit quae quas quos repellat rerum sed sunt vel.
    </div>
    <div>Aliquid assumenda atque distinctio excepturi harum, hic iste, iure minima nemo pariatur quisquam recusandae
        rerum unde velit voluptatem. Autem corporis earum facilis labore nam nulla recusandae rerum saepe sapiente
        voluptas.
    </div>
    <div>Fuga ipsam ipsum itaque voluptas. Ab accusantium consequatur debitis iusto minima nostrum, quae sed soluta
        tenetur. Asperiores, est et laboriosam mollitia porro possimus quasi ratione reiciendis repellendus rerum, sit
        voluptatem.
    </div>
    <div>Adipisci aliquam aperiam aut autem commodi corporis cumque deleniti dicta dignissimos eligendi fuga fugit,
        ipsum libero minus natus nihil nobis non quasi, quo quod reiciendis repellendus saepe sit veniam voluptatem?
    </div>
    <div>Accusantium aliquam aliquid atque autem commodi, corporis debitis ea earum error fuga fugiat hic incidunt nisi
        nobis optio, pariatur similique voluptatum. Est facilis ipsum iste laborum repudiandae sapiente soluta vel?
    </div>
    <div>Accusamus beatae cumque dolorem dolores et explicabo hic, ipsum iusto maxime nemo officiis quae repellat
        reprehenderit tempore temporibus vel voluptates. Ad animi aspernatur, minima minus molestiae odio omnis pariatur
        sed?
    </div>
    <div>Accusamus ad alias at atque commodi consectetur cum cupiditate deleniti dolore dolores earum, error est impedit
        minus, nam nihil nulla placeat quae, quas quidem quo repellendus sed tempore ullam vitae!
    </div>
    <div>Ab accusantium beatae corporis culpa, distinctio et, ex expedita, itaque labore nostrum odit quae quis quo rem
        vero. Assumenda autem consequuntur debitis deserunt illum maiores, neque pariatur porro totam vitae!
    </div>
    <div>Alias, aspernatur commodi cupiditate deserunt dicta dignissimos dolorum enim est expedita facilis harum itaque
        laborum natus nulla quis repellat repellendus, sit, sunt. Consectetur doloremque eaque eius numquam obcaecati
        odio ullam.
    </div>
    <div>Ab deleniti dolorum earum error magni nam qui quisquam quod recusandae ut? Aspernatur debitis dolor dolores ea
        explicabo illo iste magnam nostrum quaerat quis repellendus, reprehenderit sunt suscipit tempore voluptas!
    </div>
    <div>Aperiam, beatae est in inventore odit perferendis quod voluptas. Accusamus assumenda blanditiis consectetur
        consequatur delectus deleniti deserunt earum iure minus molestias natus neque nisi nulla officia quidem quo, rem
        sunt!
    </div>
    <div>Ad aliquam amet architecto beatae debitis delectus distinctio ducimus eos exercitationem explicabo hic illo in
        minima minus molestias mollitia nam natus, necessitatibus neque porro quisquam quod recusandae sed similique
        tenetur!
    </div>
    <div>Commodi, debitis dolorem eveniet exercitationem ipsa itaque iusto maxime mollitia nesciunt officiis porro
        voluptate? Dolores, explicabo veniam? Aliquam excepturi iure laboriosam laudantium, nesciunt nobis numquam
        praesentium quos rerum sint tempora.
    </div>
    <div>Ad deleniti eos hic iste quae quo repellat sint veritatis voluptas voluptates! Alias aspernatur est fugiat ipsa
        pariatur ratione repellendus vel voluptatem. Explicabo maiores nihil possimus quod, ratione saepe sequi.
    </div>
    <div>At consectetur culpa, dolor doloremque eligendi incidunt ipsa ipsam libero natus nihil reprehenderit veniam,
        vero! Aliquam atque autem in iure laboriosam modi optio quod quos, ratione reprehenderit, saepe ullam vel?
    </div>
    <div>Incidunt nemo sequi unde. Ad adipisci aspernatur deserunt eius, esse est id magnam magni numquam odit officiis
        quasi quia ut veniam voluptatum. Accusamus autem blanditiis cumque, ipsam laboriosam nobis soluta.
    </div>
    <div>Animi dicta doloremque enim et facilis, id illum laborum nihil, nulla quam quidem rem sapiente! Animi
        asperiores ipsum porro repellat tempore! Dicta doloremque expedita laborum magnam maiores provident quaerat,
        voluptatibus.
    </div>
    <div>Aliquam atque aut cum deserunt dolor doloribus ducimus error ex fugiat inventore iusto laboriosam laborum modi
        necessitatibus neque numquam pariatur qui ratione saepe sequi suscipit tempora ullam, velit voluptates
        voluptatum?
    </div>
    <div>Aliquid dolorum excepturi harum nemo nisi perferendis porro reprehenderit repudiandae totam voluptatibus! A
        consectetur, dicta eligendi esse neque omnis quas quia rem soluta suscipit tenetur totam! Animi dolores maxime
        veniam!
    </div>
    <div>Asperiores, necessitatibus veritatis? Ab adipisci aliquid aspernatur id obcaecati officia omnis quidem quod
        repellendus sint temporibus tenetur veritatis, voluptatibus. A cupiditate libero neque pariatur veritatis! Autem
        commodi libero magnam quam.
    </div>
    <div>Ad aperiam deserunt dolorum earum explicabo facilis laudantium nam sint. Amet delectus dolorum exercitationem
        expedita praesentium, ratione vitae voluptatem! Dicta dolore eos incidunt iusto nihil non quibusdam, ratione
        sequi soluta?
    </div>
    <div>A ad, asperiores at autem deserunt doloribus earum esse ex excepturi illo impedit inventore ipsam laboriosam
        neque nisi nulla omnis perferendis quas quia repellat repudiandae similique tempore temporibus voluptas
        voluptate?
    </div>
    <div>Accusantium amet architecto aspernatur consectetur cum cumque dignissimos doloribus, ex, incidunt non odit
        omnis provident quaerat quia quidem reiciendis sapiente tempora tempore temporibus unde ut veritatis voluptatem.
        Exercitationem expedita, velit!
    </div>
    <div>Libero molestias nobis officia sit? Explicabo, illo minus! Accusamus cumque eaque excepturi explicabo nesciunt
        nostrum odio. A alias architecto assumenda, consectetur debitis doloribus explicabo iure necessitatibus numquam
        placeat quisquam rerum?
    </div>
    <div>Dolorum maiores officia, quae quibusdam quisquam saepe. Animi aut corporis eos eveniet laboriosam, mollitia
        nesciunt nihil, nisi, obcaecati odio officia pariatur perspiciatis praesentium provident quos repudiandae sunt
        tempore temporibus veritatis.
    </div>
    <div>Asperiores commodi consequatur deserunt dolores eveniet impedit nemo nisi nulla quo ratione rem repellat, sed,
        voluptas? Aliquam blanditiis cum ea expedita hic incidunt minima molestias pariatur perspiciatis quae, quaerat
        quasi!
    </div>
    <div>A accusamus assumenda aut commodi cumque distinctio dolor earum inventore iure magni necessitatibus nemo nihil,
        non officiis perferendis perspiciatis provident quia quis quisquam quo, repudiandae sed sequi soluta vel vero.
    </div>
    <div>Accusamus adipisci beatae culpa deleniti deserunt dignissimos distinctio ipsa iste optio quia repudiandae
        suscipit, ullam unde vero vitae voluptate voluptatibus. Dicta fuga iste, necessitatibus nostrum quae quas
        ratione reiciendis voluptatibus.
    </div>
    <div>Fugit harum minus nisi, quia quidem similique. Amet consequatur culpa dolor, eum incidunt porro repellendus
        sit. Doloremque maiores quam quia reiciendis veritatis! Ad iste laboriosam minima nisi praesentium tempore
        temporibus.
    </div>
    <div>Autem esse id minima placeat quae quisquam sit. Aliquam atque culpa facilis hic, minus mollitia nam
        necessitatibus nesciunt nobis odio porro praesentium quaerat quidem repellat saepe similique vel veniam,
        voluptates?
    </div>
    <div>Ab accusamus, aliquid beatae, distinctio exercitationem impedit incidunt laudantium maiores molestiae odio quia
        quibusdam quis reiciendis saepe sed veritatis voluptatem. Cupiditate doloribus eligendi, fugiat inventore
        laudantium necessitatibus quasi quia unde.
    </div>
    <div>Asperiores excepturi incidunt omnis quidem, reiciendis saepe voluptatum. Aliquam aperiam consequuntur dicta
        distinctio doloribus ea, eaque eveniet, ipsam iusto maxime molestiae nemo nesciunt non porro quaerat recusandae
        reprehenderit tenetur totam!
    </div>
    <div>Accusamus accusantium assumenda atque dicta ducimus enim eum fugiat in molestiae, nulla omnis quo rerum vitae?
        Distinctio dolores laudantium, necessitatibus nobis odit omnis perferendis reprehenderit tempore temporibus.
        Doloremque, fuga, optio?
    </div>
    <div>Adipisci at consequuntur cumque debitis eos exercitationem, facilis optio possimus quae! Dignissimos hic iste
        iusto, molestiae non praesentium rem sunt! Amet debitis eius ex labore nisi praesentium quos recusandae vel.
    </div>
    <div>Animi aspernatur, blanditiis dolor enim impedit iste laudantium minima, molestias nemo nihil odio praesentium
        recusandae similique, veritatis voluptate! Aspernatur at deleniti eius inventore ipsa ipsam nam nemo, porro
        sequi vel!
    </div>
</div>
<script>
    window.addEventListener('resize',function (){
        alert('窗口大小被改变了')
    });
    window.addEventListener('scroll',function (){
        alert('窗口滚动了')
    });

    let h4E = document.querySelector('h4');
    window.addEventListener('mouseover', function () {
        console.log('被震惊了');
    })
    let btnE = document.getElementById('btn');
    btnE.addEventListener('click', function () {
        alert('点击了！2')
    })
</script>
</body>
</html>